<template>
	<view class="consult-chat">
		<scroll-view scroll-top="0" scroll-with-animation scroll-y="true" @scrolltoupper="scrolltoupper"
			:scroll-into-view="scrollToView" :style="{height:height+'px'}" class="scroll">
			<view class="scroll-msg" v-for="(item,index) in chatList(chatMsgList)" :key="index"
				:id="'msg'+item.message_id">
				<view class="scroll-msg-left" v-if="item.recipient_id==receiverinfo.id">
					<view class="time" v-if="item.showTime">{{changeTime(item.send_time)}}</view>
					<view class="scroll-msg-left-box">
						<image
							:src="'https://bkimg.cdn.bcebos.com/pic/a1ec08fa513d269759ee5868e1b3a5fb43166d2272e7?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5'"
							mode=""></image>
						<!-- 文字 -->
						<view class="scroll-msg-msg" v-if="item.content_type==1">
							{{item.content}}
						</view>
						<!-- 图片 -->
						<view class="scroll-msg-image" @click="previewImage(item.content)" v-if="item.content_type==2">
							<img class="msg-image" :src="item.content" mode="heightFix"></img>
						</view>
						<!-- 语音 -->
						<view class="scroll-msg-voice" v-if="item.content_type==4">
							<view class="scroll-msg-voice-box" :style="{width:item.content.time*4+'px'}"
								@click="playVoice(item.content.voice)">
								<view class="voice">
									<img class="voice-img" src="../../assets/imges/message/voice_input_left.png"
										mode=""></img>
								</view>
								<text>{{item.content.time+'"'}}</text>
							</view>
						</view>
						<!-- 是否解决问题 -->
						<view class="scroll-msg-btn" v-if="item.content_type==3">
							<view class="scroll-msg-msg">
								{{item.content}}
							</view>
							<view class="msg-btn">
								<view class="button">
									<u-button type="success" size="small" text="解决" shape="circle"></u-button>
								</view>
								<view class="button">
									<u-button text="未解决" color="rgba(39,40,50,0.30)" size="small" shape="circle">
									</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="scroll-msg-right" v-else>
					<view class="time" v-if="item.showTime">{{changeTime(item.send_time)}}</view>
					<view class="scroll-msg-right-box">
						<image
							:src="'https://bkimg.cdn.bcebos.com/pic/dcc451da81cb39dbb6fd5e9c655e1e24ab18962b9aeb?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5'"
							mode=""></image>
						<!-- 文字 -->
						<view class="scroll-msg-msg" v-if="item.content_type==1">
							{{item.content}}
						</view>
						<!-- 图片 -->
						<view class="scroll-msg-image" @click="previewImage(item.content)" v-if="item.content_type==2">
							<img class="msg-image" :src="item.content" mode="heightFix"></img>
						</view>
						<!-- 语音 -->
						<view class="scroll-msg-voice" v-if="item.content_type==4">
							<view class="scroll-msg-voice-box" :style="{width:item.content.time*4+'px'}"
								@click="playVoice(item.content.voice)">
								<!-- <img class="voice" src="@/assets/imges/message/voice_input_right.png"></img> -->
								<view class="voice">
									<img class="voice-img" src="../../assets/imges/message/voice_input_right.png"
										mode=""></img>
								</view>
								<text>{{item.content.time+'"'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 继续咨询 -->
			<view class="continue-consulting" v-if="flag" @click="consult">
				继续咨询
			</view>
		</scroll-view>
	</view>
</template>
<!-- <Chat ref="chat" :height="windowHeight-navbarHeight-sendHeight" :chatMsgList="chatMsgList" @scrolltoupper="scrolltoupper">
		</Chat> -->
<!-- this.$refs.chat.setScrollToView() -->
<script>
	import {
		dateFormat,
		spaceTime
	} from '@/utils/dateFormat.js'
	// 音频
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		name: "Chat",
		props: {
			// 聊天信息
			chatMsgList: {
				type: Array,
				default: []
			},
			// 高度
			height: {
				type: [String, Number],
				default: 0
			},
			isok:{
				type: Boolean,
				default: false
			},
			flag:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				scrollToView: '',
				receiverinfo: {
					id: 16
				}, //接收人信息
				userinfo: {
					id: 15
				}, //用户信息/发送人信息
			};
		},
		computed: {
			// 转换时间
			changeTime() {
				return function(date) {
					if (date) {
						return dateFormat(date)
					}
				}
			},
			chatList() {
				return function(list) {
					return spaceTime(list)
				}
			}
		},
		methods: {
			consult(){
				uni.removeStorageSync('flag')
				uni.redirectTo({
				       url: '/pages/consult/index'
				    });	
			},
			scrolltoupper() {
				this.$emit('scrolltoupper')
			},
			// 预览图片
			previewImage(img) {
				let imgArr = []
				// 将消息内容为图片的图片链接全部重新赋值到另外一个数组
				this.chatMsgList.forEach(item => {
					if (item.content_type == 2) {
						imgArr.push(item.content)
					}
				})
				// 获取当前选中的图片索引
				let index = imgArr.findIndex(item => {
					return item == img
				})
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 播放语音
			playVoice(e) {
				innerAudioContext.src = e
				innerAudioContext.play()
			},
			// 滚动到底部
			setScrollToView() {
				this.scrollToView = ''
				this.$nextTick(() => {
					this.scrollToView = 'msg' + this.chatMsgList[this.chatMsgList.length - 1].message_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consult-chat {
		.scroll {
			background: #F4F4F4;
			font-size: 28upx;

			.scroll-msg {
				display: flex;
				flex-direction: column;
				padding: 0 20upx;

				// 消息公共部分
				.scroll-msg-file {
					max-width: 480upx;
					background: #FFFFFF;
					padding: 18upx 24upx;
					border-radius: 20upx;

					.msg-file {
						display: flex;
						justify-content: space-around;

						image {
							width: 100upx;
							height: 100upx;
						}

						.msg-file-right {
							max-width: 370upx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							font-size: 28upx;

							.msg-file-right-name {
								max-width: 370upx;
								overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
								white-space: nowrap; //（设置文字在一行显示，不能换行）
								text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
							}

							.msg-file-right-size {
								color: #9f9f9f;
							}
						}
					}
				}

				.scroll-msg-left {
					.time {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: rgba(39, 40, 50, 0.30);
						letter-spacing: -0.41upx;
						font-weight: 400;
						text-align: center;
						padding: 20upx 0;
					}

					.scroll-msg-left-box {
						display: flex;
						flex-direction: row;
						padding: 20upx 0;

						image {
							width: 80upx;
							height: 80upx;
							border-radius: 20upx;
							margin-right: 20upx;
						}

						.scroll-msg-msg {
							max-width: 480upx;
							background: #FFFFFF;
							padding: 18upx 24upx;
							border-radius: 20upx;
						}

						.scroll-msg-btn {
							.msg-btn {
								margin-top: 15upx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.button {
									width: 45%;
									text-align: center;
								}
							}
						}

						.scroll-msg-image {
							.msg-image {
								min-width: 200upx;
								min-height: 200upx;
								max-width: 300upx;
								max-height: 300upx;
								border-radius: 20upx;
							}
						}

						.scroll-msg-map {
							.msg-map {
								width: 400upx;
								height: 350upx;
								border-radius: 20upx;
							}
						}

						.scroll-msg-voice {
							.scroll-msg-voice-box {
								background: #FFFFFF;
								padding: 18upx 24upx;
								min-width: 100upx;
								border-radius: 20upx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.voice {
									width: 28upx;
									height: 36upx;

									.voice-img {
										width: 100%;
										height: 100%;
									}
								}

								text {
									font-size: 26upx;
								}
							}
						}
					}
				}

				.scroll-msg-right {
					.time {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: rgba(39, 40, 50, 0.30);
						letter-spacing: -0.41upx;
						font-weight: 400;
						text-align: center;
						padding: 20upx 0;
					}

					.scroll-msg-right-box {
						display: flex;
						flex-direction: row-reverse;
						padding: 20upx 0;

						image {
							margin-left: 20upx;
							width: 80upx;
							height: 80upx;
							border-radius: 20upx;
						}

						.scroll-msg-msg {
							max-width: 480upx;
							background: #FFFFFF;
							padding: 18upx 24upx;
							border-radius: 20upx;
						}

						.scroll-msg-image {
							.msg-image {
								min-width: 200upx;
								min-height: 200upx;
								max-width: 250upx;
								max-height: 250upx;
								border-radius: 20upx;
							}
						}

						.scroll-msg-map {
							.msg-map {
								width: 400upx;
								height: 350upx;
								border-radius: 20upx;
							}
						}

						.scroll-msg-voice {
							.scroll-msg-voice-box {
								background: #FFFFFF;
								padding: 18upx 24upx;
								min-width: 100upx;
								border-radius: 20upx;
								display: flex;
								flex-direction: row-reverse;
								justify-content: space-between;
								align-items: center;

								.voice {
									width: 28upx;
									height: 36upx;

									.voice-img {
										width: 100%;
										height: 100%;
									}
								}

								text {
									font-size: 26upx;
								}
							}
						}
					}
				}
			}

			.continue-consulting {
				font-size: 28upx;
				color: #55aaff;
				text-align: center;
				padding: 50upx 0;
			}
		}
	}
</style>
